<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><!DOCTYPE html>
        <html lang="zh-CN">
        <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>用户信息框组件</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 用户信息框基础样式 - 所有类名以user-info-开头 */
        .user-info-container {
            --avatar-size: 60px;
            --font-size-name: 18px;
            --font-size-uid: 14px;
            --font-size-signature: 14px;
            --padding: 12px;
            --border-radius: 8px;
            --background-color: #f5f7fa;
            --border-color: #e0e6ed;
            --text-color: #333;
            --secondary-color: #666;

            display: flex;
            align-items: center;
            padding: var(--padding);
            background-color: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
            max-width: 100%;
            box-sizing: border-box;
        }

        /* 头像区域 - 特别标注 */
        .user-info-avatar-container {
            position: relative;
            margin-right: 15px;
            flex-shrink: 0;
        }

        .user-info-avatar {
            width: var(--avatar-size);
            height: var(--avatar-size);
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #4361ee;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .user-info-avatar:hover {
            transform: scale(1.05);
        }

        /* 在线状态指示器 */
        .user-info-status {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #4caf50;
            border: 2px solid var(--background-color);
        }

        /* 文本信息区域 */
        .user-info-content {
            flex: 1;
            min-width: 0;
        }

        .user-info-name {
            font-size: var(--font-size-name);
            font-weight: 600;
            color: var(--text-color);
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .user-info-uid {
            font-size: var(--font-size-uid);
            color: var(--secondary-color);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
        }

        .user-info-uid i {
            margin-right: 5px;
            color: #4361ee;
        }

        .user-info-signature {
            font-size: var(--font-size-signature);
            color: var(--secondary-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-style: italic;
        }

        /* 尺寸变体 */
        .user-info-small {
            --avatar-size: 40px;
            --font-size-name: 16px;
            --font-size-uid: 12px;
            --font-size-signature: 12px;
            --padding: 8px;
        }

        .user-info-large {
            --avatar-size: 80px;
            --font-size-name: 20px;
            --font-size-uid: 16px;
            --font-size-signature: 16px;
            --padding: 16px;
        }

        /* 主题变体 */
        .user-info-dark {
            --background-color: #2c3e50;
            --border-color: #34495e;
            --text-color: #ecf0f1;
            --secondary-color: #bdc3c7;
        }

        .user-info-minimal {
            --background-color: transparent;
            --border-color: transparent;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="container" style="max-width: 800px; margin: 40px auto; padding: 20px;">
    <h1 style="text-align: center; margin-bottom: 30px; color: #4361ee;">用户信息框组件</h1>

    <div style="margin-bottom: 30px; background: #f8f9fa; padding: 20px; border-radius: 8px;">
        <h2 style="color: #4361ee; margin-bottom: 15px;">使用说明</h2>
        <p>这是一个可复用的用户信息框组件，具有以下特点：</p>
        <ul>
            <li>所有CSS类名以<code>user-info-</code>开头，防止样式污染</li>
            <li>提供三种尺寸：默认、小尺寸(<code>user-info-small</code>)、大尺寸(<code>user-info-large</code>)</li>
            <li>提供两种主题：默认、深色主题(<code>user-info-dark</code>)、极简主题(<code>user-info-minimal</code>)</li>
            <li>头像部分特别标注，类名为<code>user-info-avatar</code>，可在聊天消息中复用</li>
            <li>使用CSS变量控制尺寸，方便调整</li>
        </ul>
    </div>

    <h2 style="color: #4361ee; margin: 30px 0 15px;">默认样式</h2>
    <div class="user-info-container">
        <div class="user-info-avatar-container">
            <img src="#" alt="用户头像" class="user-info-avatar">
            <div class="user-info-status"></div>
        </div>
        <div class="user-info-content">
            <div class="user-info-name">张三</div>
            <div class="user-info-uid">
                <i class="fas fa-id-card"></i> UID: 123456789
            </div>
            <div class="user-info-signature">热爱生活，热爱编程！</div>
        </div>
    </div>

    <h2 style="color: #4361ee; margin: 30px 0 15px;">小尺寸</h2>
    <div class="user-info-container user-info-small">
        <div class="user-info-avatar-container">
            <img src="#" alt="用户头像" class="user-info-avatar">
            <div class="user-info-status"></div>
        </div>
        <div class="user-info-content">
            <div class="user-info-name">李四</div>
            <div class="user-info-uid">
                <i class="fas fa-id-card"></i> UID: 987654321
            </div>
            <div class="user-info-signature">今天又是充满希望的一天！</div>
        </div>
    </div>

    <h2 style="color: #4361ee; margin: 30px 0 15px;">大尺寸</h2>
    <div class="user-info-container user-info-large">
        <div class="user-info-avatar-container">
            <img src="#" alt="用户头像" class="user-info-avatar">
            <div class="user-info-status"></div>
        </div>
        <div class="user-info-content">
            <div class="user-info-name">王五</div>
            <div class="user-info-uid">
                <i class="fas fa-id-card"></i> UID: 456789123
            </div>
            <div class="user-info-signature">路漫漫其修远兮，吾将上下而求索</div>
        </div>
    </div>

    <h2 style="color: #4361ee; margin: 30px 0 15px;">深色主题</h2>
    <div class="user-info-container user-info-dark">
        <div class="user-info-avatar-container">
            <img src="#" alt="用户头像" class="user-info-avatar">
            <div class="user-info-status"></div>
        </div>
        <div class="user-info-content">
            <div class="user-info-name">赵六</div>
            <div class="user-info-uid">
                <i class="fas fa-id-card"></i> UID: 654321987
            </div>
            <div class="user-info-signature">Stay hungry, stay foolish</div>
        </div>
    </div>

    <h2 style="color: #4361ee; margin: 30px 0 15px;">极简主题</h2>
    <div class="user-info-container user-info-minimal">
        <div class="user-info-avatar-container">
            <img src="#" alt="用户头像" class="user-info-avatar">
        </div>
        <div class="user-info-content">
            <div class="user-info-name">钱七</div>
            <div class="user-info-uid">
                <i class="fas fa-id-card"></i> UID: 321654987
            </div>
            <div class="user-info-signature">简洁是智慧的灵魂</div>
        </div>
    </div>

    <h2 style="color: #4361ee; margin: 30px 0 15px;">在聊天消息中使用头像</h2>
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px;">
        <p>以下示例展示如何在聊天消息中复用头像组件：</p>

        <div style="display: flex; margin: 15px 0; align-items: flex-start;">
            <!-- 复用user-info-avatar类 -->
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像"
                 class="user-info-avatar" style="width: 40px; height: 40px; margin-right: 10px;">
            <div style="background: #e3f2fd; padding: 10px 15px; border-radius: 18px; max-width: 70%;">
                <div style="font-weight: 500; margin-bottom: 5px;">张三</div>
                <div>你好！这个用户信息框组件设计得真不错！</div>
            </div>
        </div>

        <div style="display: flex; margin: 15px 0; align-items: flex-start; justify-content: flex-end;">
            <div style="background: #d1ecf1; padding: 10px 15px; border-radius: 18px; max-width: 70%;">
                <div style="font-weight: 500; margin-bottom: 5px; text-align: right;">李四</div>
                <div>是的，特别是头像组件复用很方便！</div>
            </div>
            <!-- 复用user-info-avatar类 -->
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像"
                 class="user-info-avatar" style="width: 40px; height: 40px; margin-left: 10px;">
        </div>
    </div>
</div>
</body>
</html></title>
</head>
<body>

</body>
</html>